<template>
  <div class="swiper-wrapper">
    <van-swipe class="my-swipe" :loop="false">
      <van-swipe-item>
        <van-grid square :border="false">
          <van-grid-item
            v-for="(value, index) in foodCategory.slice(0,8)"
            :key="index"
            border="false"
          >
            <van-image :src="pre + value.image_url" width="50" />
            <span>{{value.title}}</span>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid square :border="false">
          <van-grid-item
            v-for="(value, index) in foodCategory.slice(8,16)"
            :key="index"
            border="false"
          >
            <van-image :src="pre + value.image_url" width="50" />
            <span>{{value.title}}</span>
          </van-grid-item>
          
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { CategoryList } from "@/request/api";

export default {
  data() {
    return {
      foodCategory: [],
      pre: "https://fuss10.elemecdn.com"
    };
  },
  // 创建create
  created() {
    CategoryList().then(res => {
      let data = res.data;
      this.foodCategory = data;
    });
  }
};
</script>

<style lang="less">

.swiper-wrapper{
    padding-bottom: 12px;
    background-color: #fff;
}

.my-swipe{
    padding-bottom: 20px;
}

.van-swipe__indicators {
  .van-swipe__indicator {
    width: 15px;
    height: 15px;
    background-color: #cccccc;
  }
  .van-swipe__indicator--active {
    background-color: #1989fa;
  }
}
</style>